<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<link rel="stylesheet" href="../../css/common.css">
		<link rel="stylesheet" href="../../css/main/createProduct.css">
		<link rel="stylesheet" href="../../css/step.css">
		<title>创建新项目_群智应用开发平台</title>
	</head>
	<style>
		.box,
		.container {
			clear: both;
		}

		pre {
			background: #f2f2f2;
			color: #000;
			width: 800px;
			margin: 0 auto;
			border: 1px solid #dee0e1;
			-webkit-box-shadow: inset 1px 1px 2px #ddd;
			-moz-box-shadow: inset 1px 1px 2px #ddd;
			box-shadow: inset 1px 1px 2px #ddd;
		}

		em {
			color: red;
		}

		.eis-horizontal-steps .eis-form-steps {
			padding-left: 150px;
			margin-top: 30px;
		}

		.eis-horizontal-steps .eis-form-steps .eis-step-progress {
			height: 2px;
			background: #4995FA;
			width: 0;
			position: absolute;
			top: 15px;
			left: 180px;
			-webkit-transition: all .4s;
			-moz-transition: all .4s;
			-ms-transition: all .4s;
			-o-transition: all .4s;
			transition: all .4s;
		}
	</style>
	<body>
		<div class="container">
			<!-- 公共头部 -->
			<div class="header">
				<div class="w hd_content">
					<div class="logo">
						<img src="../../images/logo.png" alt="" srcset="">
					</div>
					<div class="title" id="page-start">群智应用开发平台</div>
					<div class="list">
						<ul>
							<li>
								<img src="../../images/username.png" alt="">
								<span class="usernameShow">
									<span class="DynamicUsername"></span>
									<div class="dynamicShow">
										<div class="angle"></div>
										<div id="userMsg">
											<ul>
												<a href="accountSetting.html" id="accountSettingLink">
													<li class="userMsg">账号设置</li>
												</a>
												<li class="userMsg outLogin">退出登录</li>
											</ul>
										</div>
									</div>
								</span>
								<span></span>
							</li>
						</ul>
					</div>

				</div>
			</div>
			<!-- 主体部分 -->
			<div class=" w createProduct">
				<p class="hd_nav" id="hd_nav">
					<a href="../main/productList.html" id="productListLink">项目列表</a>
					<span class="Separator">/</span>
					<span>创建新项目</span>
				</p>
				<hr>
				<div class="box">
					<div class="eis-stepContents">
						<div class="eis-stepContent">
							<div class="productName">
								<span>项目名称:</span>
								<input type="text" name="" id="projectName" placeholder="请输入项目名称" class="productInputBox" />
								<div>
									<span>项目类型:</span>
									<input type="text" name="" id="projectType" placeholder="请输入项目类型" class="productInputBox" />
								</div>
							</div>
						</div>
						<div class="eis-stepContent">
							<div class="productName">
								<span>通讯方式:</span>
								<select name="" class="communication">
									<option selected hidden disabled value="">请选择通讯方式</option>
									<option value="">WI-FI</option>
									<option value="">蓝牙</option>
									<option value="">Zigbee</option>
									<option value="">NB-IOT</option>
									<option value="">4G</option>
								</select>
							</div>
						</div>
						<div class="eis-stepContent">
							<form>
								<div class="questionList">
									<textarea class="textarea" id="textarea"
										placeholder="例如:我想创建一个智慧家居系统,我需要网站公告功能,在用户管理方面:我需要权限验证,同时我还需要设备预警功能,去实时的监测一些东西,另外我希望能提供给我一个方便的报警设置功能. 除此之外,我还想将数据进行方便的管理,最好有可视化展示..."></textarea>
								</div>
								<button type="button" class="confirm" id="confirm">应用需求分解</button>
							</form>
							<div class="demand" style="display: none;">
								<p>根据您输入的内容，获得以下功能需求</p>
								<table cellspacing="0" cellpadding="0" class="demand-table">
									
									<!--								<tr>-->
									<!--									<td>功能一</td>-->
									<!--									<td>网站公告</td>-->
									<!--								</tr>-->
									<!--								<tr>-->
									<!--									<td>功能二</td>-->
									<!--									<td>用户管理</td>-->
									<!--								</tr>-->
									<!--								<tr>-->
									<!--									<td>功能三</td>-->
									<!--									<td>设备预警规则</td>-->
									<!--								</tr>-->
									<!--								<tr>-->
									<!--									<td>功能四</td>-->
									<!--									<td>报警设置</td>-->
									<!--								</tr>-->
									<!--								<tr>-->
									<!--									<td>功能五</td>-->
									<!--									<td>数据管理</td>-->
									<!--								</tr>-->
								</table>
							</div>
						</div>
						<div class="eis-stepContent">
							<div class="questionList">
								<textarea class="textarea" id="textarea1"
									placeholder="例如:我还想添加设备命令下发功能,同时我还想实现设备接入...,如果不需要添加新的内容,请直接点击下一步"></textarea>
							</div>
								<button type="button" class="confirm1 confirm">确认需求</button>
							<div class="demand demand1" style="display: none;">
								<p>根据您输入的内容，获得以下功能需求</p>
								<table cellspacing="0" cellpadding="0" class="demand-table demand-table1">
									
									<!--								<tr>-->
									<!--									<td>功能一</td>-->
									<!--									<td>网站公告</td>-->
									<!--								</tr>-->
									<!--								<tr>-->
									<!--									<td>功能二</td>-->
									<!--									<td>用户管理</td>-->
									<!--								</tr>-->
									<!--								<tr>-->
									<!--									<td>功能三</td>-->
									<!--									<td>设备预警规则</td>-->
									<!--								</tr>-->
									<!--								<tr>-->
									<!--									<td>功能四</td>-->
									<!--									<td>报警设置</td>-->
									<!--								</tr>-->
									<!--								<tr>-->
									<!--									<td>功能五</td>-->
									<!--									<td>数据管理</td>-->
									<!--								</tr>-->
									<!--								<tr>-->
									<!--									<td>功能六</td>-->
									<!--									<td>设备命令下发</td>-->
									<!--								</tr>-->
									<!--								<tr>-->
									<!--									<td>功能七</td>-->
									<!--									<td>设备接入</td>-->
									<!--								</tr>-->
								</table>
							</div>
						</div>
						<div class="eis-stepContent">
							<div class="datasShow">
								<div class="imagemap">
									<div class="systemname">
										<div class="centername">群智应用系统</div>
									</div>

									<!--<div class="name">
														图谱映射
													</div> -->
									<canvas id="myCanvas" width="800" height="655">
										<!-- <canvas id="myCanvas" width="800" height="734"> -->
										您的浏览器不支持canvas标签。
									</canvas>
									<div class="yu">
										<p class="pink">——域1</p>
										<p class="green">——域2</p>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>


				<!-- 当用户输入信息不完整时给出提示 -->
				<div class="mask">
					<div class="alert">
						<p><span>温馨提示:</span>请输入完整信息</p>
						<button type="button" id="cancelMask">确认</button>
					</div>
				</div>

			</div>

			<div class="correct"></div>
		</div>

		<!-- 公共尾部 -->
		<div class="footer">
			<div class="w">
				<div class="linkList">
					<ul>
						<li>
							<a href="../index.html">官网首页</a>
						</li>
						<li>
							<a href="">关于群智应用平台</a>
						</li>
						<li>
							<a href="">联系我们</a>
						</li>
						<li>
							<a href="">加入我们</a>
						</li>
						<li>
							<a href="">服务协议</a>
						</li>
						<li>
							<a href="">隐私协议</a>
						</li>
					</ul>
				</div>
				<p>&copy;2020-2021 西安电子科技大学</p>
			</div>
		</div>
		<script src="../../js/jquery.min.js"></script>
		
		<script src="../../js/http.js"></script>
		<script src="../../js/step.js"></script>
		<script src="../../js/main/createProduct.js"></script>
		<script src="../../js/common.js"></script>
		<script type="text/javascript">
			$(function() {
				$('.box').step({
					stepDirection: 'x',
					showStepButton: true,
					stepCount: 5,
					stepTitles: ['请输入项目名称和类型', '请选择项目通讯方式', '请输入所需要的功能描述', '请输入要继续添加的内容', '图谱预览'],
				});
				
			})
		</script>
	</body>

</html>
